<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
  <caption>商品列表</caption>
  <tr>
    <th>商品名</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
</table>
<script>
  //定义空的Person对象
  function Person() {

  }
  //实例化Person对象
  let p1 = new person;
  //动态添加属性
  p1.name = "雪碧";
  p1.age = 1;
  //动态添加方法
  p1.run = function () {
    console.log("我叫"+this.name+"今年"+this.age);
  }
  //调用方法
  p1.run();
  /*直接实例化对象*/
  let p2 ={};
  p2.name = "雪碧";
  p2.age = 1;
  p2.run = function () {
    console.log("p2 方法执行")
  }
  p2.run();

  /*实例化自带属性和方法的对象*/
  let p3 = {
    name : "雪碧",
    age :30,
    run:function () {
      alert(this.name+":"+this.age);
    }
  }
  p3.run();
  //通过自定义对象封装数据
  let  arr = [{name:"小米手机",price:"3000",count:500},
    {name:"华为手机",price:"3000",count:500},
    {name:"三星手机",price:"3000",count:500}]

  //把数组内容展示到页面上
  for (let item of arr){
    let tr  = document.createElement("tr");
    let nametd = document.createElement("td");
    let prtd = document.createElement("td");
    let counttd = document.createElement("td");
    nametd.innerText  = item.name;
    prtd.innerText = item.price;
    counttd.innerText =item.count;
    tr.append(nametd,prtd,counttd);
    let table = document.querySelector("table");
    table.append(tr);
  }

</script>
</body>
</html>